<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    用户名: <input type="text" v-model="username"><br>
    密码: <input type="password" v-model="password"><br>
    确认密码: <input type="password" v-model="confirm_password"><br>
    昵称: <input type="text" v-model="nickname"><br>
    性别: <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    <span>性别选择:{{gender}}</span><br>
    所属城市:
    <!-- 三级联动第一步 -->
    <select v-model.number="sheng">
        <option v-for="(item,index) in arr" :key="index" :value="index">{{item.name}}</option>
    </select>
    <!-- 三级联动第二步 -->
    <select v-model.number="shi">
        <option v-for="(item,index) in arr[sheng].city" :key="index" :value="index">{{item.name}}</option>
    </select>
    <!-- 三级联动第三步 -->
    <select v-model.number="qu">
        <option v-for="(item,index) in arr[sheng].city[shi].districtAndCounty" :key="index" :value="index">{{item}}
        </option>
    </select><br>
    兴趣爱好:
    <input type="checkbox" v-model="hobbies" value="爬山">爬山
    <input type="checkbox" v-model="hobbies" value="旅游">旅游
    <input type="checkbox" v-model="hobbies" value="看书">看书
    <input type="checkbox" v-model="hobbies" value="看星星">看星星
    <input type="checkbox" v-model="hobbies" value="看比赛">看比赛
    <div>已选择:{{hobbies}}</div>

    <button @click="sub()">提交</button>
    <div>
        昵称:{{nickname}} <br>

        性别:{{gender}}<br>
        所属城市:{{arr[sheng].name}}/{{arr[sheng].city[shi].name}}/{{arr[sheng].city[shi].districtAndCounty[qu]}}<br>
        兴趣爱好: {{hobbies}}
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',//用户名
            password: '',//密码
            confirm_password: '',//确认密码
            nickname: '',//昵称
            gender: '',//性别
            hobbies: [],//兴趣爱好
            sheng: 0,//三级联动:省
            shi: 0,//三级联动：市
            qu: 0,//三级联动:区
            arr: [{
                name: "河北省",
                city: [{
                    name: "石家庄市",
                    districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                }, {
                    name: "张家口市",
                    districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                }, {
                    name: "承德市",
                    districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                }, {
                    name: "秦皇岛市",
                    districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                }]
            }, {
                name: "山西省",
                city: [{
                    name: "太原市",
                    districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                }, {
                    name: "朔州市",
                    districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                }, {
                    name: "大同市",
                    districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                }, {
                    name: "阳泉市",
                    districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                }],
            }],
        },
        methods: {

            sub() {
                const setAll = {
                    username: this.username,//用户名
                    password: this.password,//密码
                    confirm_password: this.confirm_password,//确认密码
                    nickname: this.nickname,//昵称
                    gender: this.genter,//性别
                    hobbies: this.hobbies,//兴趣爱好
                    sheng: this.sheng,//三级联动:省
                    shi: this.shi,//三级联动：市
                    qu: this.qu,//三级联动:区
                }
                localStorage.setItem('setAll', JSON.stringify(setAll))
                alert('提交成功,并保存到本地存储')
            }
        }
    })
</script>